<!-- 收货地址 -->
<template>
	<view class="page">
		<view v-if="list.length" class="container">
			<view class="list">
				<view class="list-item" v-for="(item, index) in list" :key="index">
					<view class="header">
						<text class="name">{{item.name}}</text>
						<text class="phone">{{item.phone}}</text>
						<text class="tag border-1px" v-if="item.is_default == 1">默认</text>
						<view class="use-address-box" v-if="addressId">
							<text class="checked-icon iconfont" v-if="addressId == item.id">&#xe62b;</text>
							<button class="use-btn btn-transition-scale9" v-else
								@click="handleUseAddress(item)">使用</button>
						</view>
					</view>
					<view class="body">
						<text class="address">{{item.region_name}}{{item.address}}</text>
					</view>
					<view class="footer">
						<view class="checkbox-label" :class="{'active': item.is_default == 1}"
							@click="handleDefaultAdderssChange(item)">
							<text class="checkbox iconfont">
								{{item.is_default == 1 ? '&#xe648;': '&#xe751;'}}
							</text>
							<text class="text">{{item.is_default == 1? '已默认': '设为默认'}}</text>
						</view>
						<view class="btn-group">
							<button class="btn btn-transition-scale9" @click="handleDelete(item, index)">删除</button>
							<button class="btn btn-transition-scale9" @click="handleEdit(item)">修改</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 -->
		<c-empty-data v-if="!list.length && !loadingState.default" empty-text="您还没有添加收货地址哦~"></c-empty-data>
		<!-- loading -->
		<view style="margin-top: 20rpx;">
			<c-loading :loadingState="loadingState"></c-loading>
		</view>

		<!-- 底部 -->
		<c-fixed-bottom height="88rpx" extra-bottom-distance="40rpx">
			<view class="btn-box">
				<button class="submit-btn btn-transition-scale95" @click="handleAdd()">新增收货地址</button>
			</view>
		</c-fixed-bottom>
	</view>
</template>

<script setup>
	import api from '@/api/index.js';
	import { ref, toValue, nextTick } from 'vue';
	import { onLoad, onUnload, onReachBottom } from "@dcloudio/uni-app";

	// 处理列表数据
	const { list, total, loadingState, refreshList } = function() {
		const params = ref({
			limit: 20,
			page: 1,
		});
		const total = ref(0);
		const list = ref([]);

		const loadingState = ref({
			default: false,
			loading: false,
			stop: false,
			pullup: false,
		});

		// 刷新列表数据
		const refreshList = () => {
			params.value.page = 1;
			getList();
		}

		// 获取列表数据
		const getList = async () => {
			// 正在加载中并且不是第一页，或者已经加载完所有了
			if ((loadingState.value.default && params.value.page !== 1) || (loadingState.value.stop && params.value
					.page > 1)) return;
			loadingState.value.default = true;
			loadingState.value.pullup = false;
			loadingState.value.stop = false;

			const res = await api.c_address_api.getList(toValue(params));

			total.value = res.data.data.totals;
			const ls = res.data.data.list;

			if (params.value.page === 1) {
				list.value = ls;
			} else {
				list.value.push(...ls);
			}

			loadingState.value.default = false;
			if (list.value.length < total.value) {
				loadingState.value.pullup = true;
			} else if (total.value === 0) {
				loadingState.value.stop = false;
			} else {
				loadingState.value.stop = true;
			}

			params.value.page += 1;
		}

		onLoad(() => {
			getList();
			uni.$on('refresh-address-manage-page', refreshList); // 删除/编辑/新增时刷新
		});

		onUnload(() => {
			uni.$off('refresh-address-manage-page', refreshList);
		});

		onReachBottom(() => {
			getList();
		});

		return { list, total, loadingState, refreshList };
	}();

	// 修改已下单的地址
	const { addressId, handleUseAddress } = function() {
		let orderId = null;
		const addressId = ref('');

		onLoad((options) => {
			if (!options.order_id || !options.address_id) return;
			orderId = options.order_id;
			addressId.value = options.address_id;
		});

		// 使用当前地址
		const handleUseAddress = async (row) => {
			uni.showSuccessToast('修改成功', () => {
				uni.navigateBack();
			});
		}

		return { addressId, handleUseAddress };
	}();

	// 切换默认地址
	const handleDefaultAdderssChange = async (row) => {
		const is_default = row.is_default == '0' ? '1' : '0';

		await api.c_address_api.setDefault({ id: row.id, is_default });
		row.is_default = is_default;

		list.value.forEach(item => {
			if (item.id !== row.id) item.is_default = '0';
			else item.is_default = is_default;
		});
	}

	// 删除地址
	const handleDelete = (row, index) => {
		uni.showModal({
			title: '提示',
			content: '您确定要删除这个地址吗?',
			success: async (res) => {
				if (!res.confirm) return;
				await api.c_address_api.delete({ id: row.id });
				uni.showSuccessToast('删除成功');
				refreshList();
			}
		})
	}

	// 编辑地址
	const handleEdit = (row) => {
		uni.navigateTo({
			url: '/pagesC-shopping/address-add/index?id=' + row.id,
			success: (res) => {
				// 通过eventChannel向被打开页面传送数据
				res.eventChannel.emit('acceptDataFromOpenerPage', {
					data: JSON.parse(JSON.stringify(row))
				});
			}
		});
	}

	// 添加地址
	const handleAdd = () => {
		uni.navigateTo({
			url: '/pagesC-shopping/address-add/index'
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 25rpx;
	}

	.list {
		&-item {
			min-height: 226rpx;
			background-color: white;
			border-radius: 20rpx;
			padding: 26rpx 20rpx 20rpx 28rpx;
			box-sizing: border-box;

			&+.list-item {
				margin-top: 25rpx;
			}

			.header {
				display: flex;
				align-items: center;

				.name,
				.phone {
					font-weight: bold;
					font-size: 30rpx;
					color: #222222;
					line-height: 1.5;
				}

				.phone {
					margin-left: 20rpx;
				}

				.tag {
					width: 64rpx;
					height: 36rpx;
					font-size: 22rpx;
					color: #FE3333;
					line-height: 38rpx;
					text-align: center;
					margin-left: 16rpx;

					&::after {
						border-color: #FE3333;
						border-radius: 16rpx;
					}
				}

				.use-address-box {
					flex-grow: 1;
					text-align: right;

					.checked-icon {
						font-size: 30rpx;
						color: #FE3333;
					}

					.use-btn {
						display: inline-block;
						width: 70rpx;
						height: 38rpx;
						font-size: 22rpx;
						color: #666;
						line-height: 38rpx;
						text-align: center;
						box-sizing: content-box;
						background-color: transparent;

						&::after {
							display: block;
							border: 1px solid #666;
							border-radius: 16rpx;
						}
					}
				}
			}

			.body {
				.address {
					display: block;
					font-size: 28rpx;
					color: #222222;
					line-height: 1.5;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// white-space: nowrap;
					margin-top: 20rpx;
				}
			}

			.footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 26rpx;

				.checkbox-label {
					display: flex;
					align-items: center;

					.checkbox {
						font-size: 40rpx;
						color: #DCDCDC;
					}

					.text {
						font-size: 24rpx;
						color: #999999;
						margin-left: 10rpx;
					}

					&.active {

						.checkbox,
						.text {
							color: #FE3333;
						}
					}
				}

				.btn-group {
					display: flex;

					.btn {
						width: 78rpx;
						height: 40rpx;
						font-size: 22rpx;
						color: #222222;
						text-align: center;
						line-height: 40rpx;
						background: #EBEBEB;
						border-radius: 20rpx;

						&+.btn {
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}

	.btn-box {
		padding: 0 45rpx;

		.submit-btn {
			width: 100%;
			height: 88rpx;
			font-size: 28rpx;
			color: white;
			text-align: center;
			line-height: 88rpx;
			border-radius: 44rpx;
			background-color: #FE3333;
		}
	}
</style>